<template>
    <view>
        <u-navbar height="48" placeholder bgColor="rgba(00,00,00,0)">
            <view slot="left">
                <u-icon name="arrow-left" size="24" bold color="#fff" @click="navigateBack()"></u-icon>
            </view>
            <view slot="center">
                <u-text text="邀请码" size="18" bold color="#fff"></u-text>
            </view>
        </u-navbar>
        <view class="body">
            <view class="code">
                <view class="headimg">
                    <u-image :src="userinfo.usertx" width="168rpx" height="168rpx" radius="14"></u-image>
                </view>
                <view class="msg">
                    <u-text :text="userinfo.nickname" size="18" bold align="center" color="#fff"></u-text>
                    <u-text :text="'邀请人数：'+userinfo.invitationcount" size="18" bold align="center" color="#fff"></u-text>
                    <u-text :text="'邀请人：'+userinfo.inviter" size="18" bold align="center"
                        color="#fff"></u-text>
                    <u-text :text="'邀请码：'+userinfo.invitecode" size="18" bold align="center" color="#fff"></u-text>
                </view>
            </view>
            <view class="usecode">
                <u-text text="填写邀请码" size="18" bold color="#5e5e5e"></u-text>
                <u-input prefixIcon="fingerprint" prefixIconStyle="color: #ffffff;font-size:38rpx;margin-right:16rpx"
                    placeholderStyle="color:#ffffff;font-size:26rpx;font-weight: 700;" placeholder="请输入邀请码~"
                    border="none" v-model="code" color="#fff"
                    customStyle="margin-top:18rpx;border-radius:18rpx;background-color:rgba(0, 170, 255, 0.7);height:68rpx;padding-left:16rpx;font-size:26rpx;font-weight: 700;">
                </u-input>
                <u-button  text="绑定邀请码" color="#ff557f" customStyle="margin-top:28rpx;height:68rpx;border-radius:18rpx;font-weight: 700;"
                    nvueTextStyle="font-size: 16rpx;"  @click="BangDin"></u-button>
            </view>
            <view class="codebtn">
                <u-button  text="邀请排行榜" color="rgba(255, 255, 255, 0.5)" customStyle="color:#ba41ff;margin:28rpx;height:88rpx;border-radius:18rpx;font-weight: 700;"
                    nvueTextStyle="font-size: 20px;" size="large" @click="GoRank"></u-button>
                <u-button  text="复制邀请码" color="rgba(255, 255, 255, 0.5)" customStyle="color:#13cf8a;margin:28rpx;height:88rpx;border-radius:18rpx;font-weight: 700;"
                    nvueTextStyle="font-size: 20px;" size="large" @click="Copy(userinfo.invitecode)"></u-button>
            </view>
        </view>
        <u-toast ref="uToast"></u-toast> 
    </view>
</template>

<script>
    import API from "../../util/request.js";
    export default {
        data() {
            return {
                code: '',
                userinfo: ''
            }
        },
        onLoad() {
            this.GetCode()
        },
        methods: {
            //返回上一页
            navigateBack() {
                uni.navigateBack({
                    delta: 1
                })
            },
            GetCode() {
                let user = uni.getStorageSync('User');
                let token = uni.getStorageSync('Token');
                uni.request({
                    url: API.Getinvitecode() + user +'&usertoken='+token,
                    success: (res) => {
                        
                        uni.request({
                            url: API.GetUserInfo() + user + '&usertoken=' + token,
                            success: (res) => {
                                var data = JSON.parse(this.AES.decrypt(res.data,API.JmKey(), API.JmIv()));
                                console.log(data)
                                this.userinfo = data.data;
                            }
                        })
                    }
                })
            },
            BangDin:function(){
                let user = uni.getStorageSync('User');
                let token = uni.getStorageSync('Token');
                if(this.code!==''){
                    uni.request({
                        url: API.Invitation() + user+'&usertoken='+token +'&invitecode=' + this.code,
                        success: (res) => {
							var data = JSON.parse(this.AES.decrypt(res.data,API.JmKey(), API.JmIv()));
							console.log(data)
                           if(data.code===200){
                               this.$refs.uToast.show({
                                   type: 'success',
                                   message: data.msf,
                                   complete() {
                                       uni.navigateBack({
                                           delta: 1
                                       })
                                   }
                               })
                               
                           }else{
                               this.$refs.uToast.show({
                                   type: 'error',
                                   message: data.msf,
                               })
                           }
                        }
                    })
                }else{
                    this.$refs.uToast.show({
                        type: 'error',
                        message: '请输入邀请码！！！',
                    })
                }
            },
            GoRank:function(){
                uni.navigateTo({
                    url:'/pages/commen/invrank'
                })
            },
            Copy:function(code){
                uni.setClipboardData({
                    data: code, // e是你要保存的内容
                    success: function () {
                		uni.showToast({
                			title:'复制成功',
                			icon:'none'
                		})
                    }
                })
            },
        }
    }
</script>

<style lang="scss">
    page {
        background-image: url('../../static/my/guide-bg1.jpg');
    }

    .body {
        margin-top: 68rpx;
    }

    .code {
        margin: 28rpx;
        background-color: rgba(255, 255, 255, 0.5);
        border-radius: 28rpx;
        padding: 26rpx;

    }

    .headimg {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .msg {
        margin-top: 18rpx;
    }

    .usecode {
        margin: 56rpx 28rpx 28rpx 28rpx;
        background-color: rgba(255, 255, 255, 0.5);
        border-radius: 28rpx;
        padding: 26rpx;
    }
    .codebtn{
        display: flex;
        align-items: center;
        justify-content: center;
    }
</style>
